<template>
  <div class="OrderStatus">
    <div class="OrderStatus_content">
      <div style="transform:translateY(-40px)" v-if="orderDetail">
        <div class="content_header">
          <div class="header_icon">
            <van-icon name="clear" size="1.5rem" color="#999999" v-if="orderDetail._status._type == 0"/>
            <van-icon name="checked" size="1.5rem" color="#e93323" v-else/>
          </div>
          <p class="header_title">{{orderDetail._status._type == 0?'订单支付失败':'订单支付成功'}}</p>
        </div>
        <div class="content_body">
          <ul>
            <li>
              <span>订单编号</span>
              <span>{{ orderDetail.order_id }}</span>
            </li>
            <li>
              <span>下单时间</span>
              <span>{{ orderDetail._pay_time }}</span>
            </li>
            <li>
              <span>支付方式</span>
              <span>{{ orderDetail._status._payType }}</span>
            </li>
            <li>
              <span>支付金额</span>
              <span>{{ orderDetail.pay_price }}</span>
            </li>
          </ul>
        </div>
        <div class="content_footer">
          <div @click="lookOrder">查看订单</div>
          <div @click="ToIndex">返回首页</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderDetail: null,
    };
  },
  methods:{
    ToIndex(){
      this.$router.push('/')
    },
    lookOrder(){
      this.$router.push({
        path:'/order/detail',
        query:{
          id:this.orderDetail.order_id
        }
      })
    }
  },
  created() {
    this.axios
      .get("/api/order/detail/" + this.$route.query.id)
      .then((response) => {
        this.orderDetail = response.data.data;
      });
  },
  beforeRouteEnter(to, from, next) {
    next(vm=>{
      if(to.params.flag){
      vm.$toast(to.params.msg)
    }
    });
  },
};
</script>

<style lang="less">
.OrderStatus {
  width: 100%;
  height: 100vh;
  padding: 0 15px;
  position: relative;
  .OrderStatus_content {
    width: calc(100% - 30px);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: #fff;
    padding: 0 10px;
    .content_header {
      border-bottom: 1px solid #f3f3f3;
      padding-bottom: 15px;
      .header_icon {
        text-align: center;
        margin-bottom: 5px;
      }
      .header_title {
        font-weight: bold;
        text-align: center;
      }
    }
    .content_body {
      width: 100%;
      padding-bottom: 10px;
      border-bottom: 1px solid #f3f3f3;
      ul > {
        width: 100%;
        li {
          height: 30px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 14px;
          span {
            &:nth-child(2) {
              color: #666666;
            }
          }
        }
      }
    }
    .content_footer {
      width: 100%;
      margin-top: 20px;
      > div {
        width: 100%;
        height: 40px;
        line-height: 40px;
        border-radius: 20px;
        text-align: center;
        &:nth-child(1) {
          color: white;
          background-color: #e93323;
          margin-bottom: 10px;
        }
        &:nth-child(2) {
          color: #ff3700;
          border: 1px solid #ff3700;
        }
      }
    }
  }
}
</style>